<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
  </head>
  <body>
    <style>
      html,
      body,
      #app {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .loading {
        width: 50px;
        height: 50px;
        overflow: hidden;
      }
      .loading-title {
        margin-top: 10px;
        font-size: 14px;
      }
      .loading-desc {
        margin-top: 10px;
        font-size: 12px;
        color: #999;
      }
    </style>

    <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%">
      <svg class="loading" viewBox="0 0 100 100">
        <g>
          <path
            fill="none"
            stroke="#409eff"
            stroke-width="8"
            stroke-dasharray="42.76482137044271 42.76482137044271"
            d="M24.3 30C11.4 30 5 43.3 5 50s6.4 20 19.3 20c19.3 0 32.1-40 51.4-40 C88.6 30 95 43.3 95 50s-6.4 20-19.3 20C56.4 70 43.6 30 24.3 30z"
            stroke-linecap="round"
            style="transform: scale(0.8); transform-origin: 50px 50px">
            <animate attributeName="stroke-dashoffset" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0;256.58892822265625" />
          </path>
          <g />
        </g>
      </svg>
      <div class="loading-title">正在加载资源</div>
      <div class="loading-desc">初次加载资源可能需要较多时间 请耐心等待</div>
    </div>
  </body>
</html>
